<script lang="ts" setup>
    import { House, ArrowRight} from "@element-plus/icons-vue"
    import { reactive } from 'vue'
    import { Dept, Vacation } from "../model/index";
    import { onMounted } from "vue";
    import createAxios from "../request";
    import userStore from '../store/UserStore';

    let axios = createAxios();
    let store = userStore();
    let s =store.getEmpno;
    let list1:Array<Vacation> = [];
    let tableData = reactive({
            "list": list1,
            "data":s
        });

    const getData = function (){
        axios({
            url: `/Vacationlist`,
            method: "POST",
            data:tableData.data
        }).then((res)=>{
            //请求成功
            tableData.list = res.data;
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
    }

    onMounted(() => {
      getData();
    });

    let currentPage = 1
    let gotoFirst = function(){
      currentPage = 1;
    }
    let gotoLast = function(){
      currentPage = tableData.list.length / 10;
    }
</script>

<template>
  <el-container id="mainView">
    <el-header style="background-color: #272822; color: #E5E5E5; line-height: 60px; font-size: 27px;">休假记录</el-header>
    <el-footer style="height: 30px; line-height: 30px; background-color: #4E5246; border-bottom:1px solid #7A7A7A; border-top:1px solid #7A7A7A;">
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px;">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"><el-icon><House /></el-icon>首页</el-breadcrumb-item>
        <el-breadcrumb-item>时间管理</el-breadcrumb-item>
        <el-breadcrumb-item>休假记录</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%;">
        <div class="table">
          <el-table :data="tableData.list" style="width: 1500px">
    <el-table-column label="姓名" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.ename}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="假期类型" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.vacation_name}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="开始时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.start_date}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="结束时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.end_date}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="时长" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.duration}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="审批情况" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span v-if="scope.row.state==-1" style="margin-left: 10px">待办</span>
          <span v-else-if="scope.row.state==0" style="margin-left: 10px">驳回</span>
          <span v-else-if="scope.row.state==1" style="margin-left: 10px">同意</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
        </div>
        <div style="display: flex; justify-content: flex-end;">
          <el-button color="#262727" @click="gotoFirst">首页</el-button>&nbsp;&nbsp;
          <el-pagination 
            background layout="prev, pager, next" 
            :total="tableData.list.length" 
            style="text-align: right;" 
            current-page="currenPage" 
            :page-size="1"/>&nbsp;&nbsp;
          <el-button color="#262727" @click="gotoLast">尾页</el-button>
        </div>
    </el-main>
  </el-container>
</template>
  
<style scoped>
    #mainView {
        height: 100%;
        width: 100%;
    }

    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }

    .table {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .example-basic .el-date-editor {
      margin: 8px;
    }

</style>
  